<template>
    <div class="table">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>菜单管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="addEdit">新建</el-button>
                <el-button type="warning" icon="el-icon-delete" class="handle-del mr10" @click="delCache" v-loading="cacheLoading">清除菜单缓存</el-button>
            </div>

            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="name" label="菜单设置">
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                </el-table-column>
                <el-table-column label="操作" width="220" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" icon="el-icon-edit"
                                   @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加弹出框 -->
        <el-dialog v-dialogDrag :title="title" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="菜单名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单:">
                    <el-cascader v-model="form.pid" :options="allMenus"
                                 style="width: 100%;"
                                 :props="{ label: 'name', value: 'id', children: 'children', checkStrictly: true}"
                                 @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="链接:" prop="link">
                    <el-input v-model="form.link" placeholder="请输入链接"></el-input>
                </el-form-item>
                <el-form-item label="排序:" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="图标:" prop="icon">
                    <el-input v-model="form.icon" placeholder="请输入图标"></el-input>
                    <el-link href="https://element.eleme.cn/#/zh-CN/component/icon#tu-biao-ji-he"
                             type="primary" target="_blank" :underline="false">
                        图标参考地址:https://element.eleme.cn/#/zh-CN/component/icon#tu-biao-ji-he
                    </el-link>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit" v-preventReClick>确 定</el-button>
			</span>
        </el-dialog>

    </div>
</template>

<script>
import common from "../../common/common";

export default {
    data() {
        return {
            title: '添加菜单',
            editVisible: false, //默认弹框隐藏
            delVisible: false, //默认删除提示框隐藏
            form: {},
            tableData: [],
            allMenus: [],//用于新增、编辑
            isEdit: false,
            total: 0,
            params: {
                page: 1,
                per_page: 10,
            },
            id: '',
            loading: false,
            rules: {
                name: [{required: true, message: "请输入菜单名称",trigger:'blur'}],
            },
            cacheLoading:false,

        }
    },
    created() {
        this.getLocationList();
    },
    activated() {
        this.getLocationList();
    },

    methods: {
        //获取菜单列表
        getLocationList() {
            this.$get(this.$api.adminMenus, {isAll: 1}).then(res => {
                if (res.code == 200) {
                    this.tableData = [...res.data]
                    this.allMenus = [{id: 0, name: '顶级菜单', children: []}]
                    this.allMenus[0].children = res.data
                    this.loading = false
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        // 点击新建按钮
        addEdit() {
            this.title = '添加菜单'
            this.form = this.$options.data().form
            this.editVisible = true
            this.isEdit = false
        },
        handleChange(value) {

        },
        // 点击确定按钮
        saveEdit() {
            if (this.$isEmpty(this.form.name)) {
                return this.$message.error('请输入菜单名称')
            }
            let pid = 0;
            if (Array.isArray(this.form.pid)) {
                pid = this.form.pid[this.form.pid.length - 1]
            } else {
                pid = this.$isEmpty(this.form.pid) ? 0 : this.form.pid
            }
            let params = {
                name: this.form.name,
                pid: pid,
                link: this.form.link,
                icon: this.form.icon,
                sort: this.form.sort,
            }
            if (!this.isEdit) {
                common.addData(this.$api.adminMenus, params, this);
            } else {
                common.editData(this.$api.adminMenus + '/' + this.id, params, this);
            }


        },
        // 点击编辑按钮
        handleEdit(index, row) {
            this.editVisible = true
            this.isEdit = true
            this.title = '编辑菜单'
            this.id = row.id
            this.form = {
                name: row.name,
                pid: row.pid,
                link: row.link,
                icon: row.icon,
                sort: row.sort,
            }
        },

        // 点击删除按钮
        // handleDelete(index, row) {
        //     let tip = '此操作将删除该菜单, 是否继续?';
        //     common.deleteData(this.$api.adminMenus + '/' + row.id, tip, this);
        // },

		// 点击删除按钮
		handleDelete(index,row) {
			console.log(row,'获取id')
			this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {

				this.$delete(this.$api.adminMenus + '/' + row.id).then(res => {
					if (res.code == 200) {
						this.getLocationList()
						return this.$message.success('删除成功！')
					} else {
						return this.$message.error(res.msg)
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},

        delCache(){
            this.cacheLoading = true;
            this.$get(this.$api.delMenusCache).then(res => {
                this.cacheLoading = false;
                if (res.code == 200) {
                    this.getLocationList();
                    this.$message.success('清除成功！');
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.avatar-uploader {
    margin-top: 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: flex;
}
</style>
